<template>
  <div>
    <a-form :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
      <a-form-item label="表" required>
        {{ schema }}.{{ table }}
      </a-form-item>
      <a-form-item label="包名" required>
        <ZgInput v-model="packageName"></ZgInput>
      </a-form-item>
      <a-form-item label="存储位置" required>
        <ZgInput v-model="vueLocation"></ZgInput>
      </a-form-item>
      <a-form-item label="选择模板" required>
        <div class="flx-s mb10">
          <a-button type="link" @click="ckAll" class="mr10">全选</a-button>
          <a-button v-for="(t,i) in groupArr" :key="`group${i}`" class="mr10" :type="group === t.group?'default':'link'" @click="setGroup(t)">
            {{ t.name }}
          </a-button>
        </div>
        <a-row>
          <a-col :span="4" v-for="t in list" :key="t.code">
            <ZgCheckbox class="mb10" v-model="t.ck">{{ t.code }}</ZgCheckbox>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item label="操作">
        <a-button type="primary" @click="generate">
          <i class="fa fa-file-text-o mr5"/>生成代码
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
export default {
  props: {
    schema: {
      type: String,
      default: 'base'
    },
    table: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      packageName: 'com.zg.generator.result',
      vueLocation: 'D:\\zxb\\workspace\\zgframework\\web\\src\\views\\system\\generator\\result',
      group: 0,
      list: [],
      groupArr: [
        { group: 0, name: '自定义', tmpls: [] },
        { group: 1, name: '单表DAO', tmpls: ['Controller', '', '', '', ''] },
        { group: 2, name: '单表CRUD', tmpls: ['AddVue', '', '', '', ''] },
        { group: 3, name: '子表CRUD生成', tmpls: ['ChildController', '', '', '', ''] },
        { group: 4, name: '单表TREE', tmpls: ['TreeController', '', '', '', ''] }
      ]
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    setGroup (t) {
      this.group = t.group
      this.list.forEach(x => {
        x.ck = t.tmpls.includes(x.code)
      })
    },
    ckAll () {
      this.list.forEach(x => {
        x.ck = true
      })
    },
    search () {
      this.$http.get('/zg-generator/tmpl/all', {}, data => {
        this.list = data.map(t => {
          t.ck = false
          return t
        })
      })
    },
    generate () {
      if (this.schema.length === 0 || this.table.length === 0) {
        this.$warning({ title: '未设置表' })
        return
      }
      if (this.packageName.length === 0) {
        this.$warning({ title: '请设置后端代码包名' })
        return
      }
      if (this.vueLocation.length === 0) {
        this.$warning({ title: '请设置前端代码位置' })
        return
      }

      const arr = this.list.filter(t => {
        return t.ck
      })

      if (arr.length === 0) {
        this.$warning({ title: '请设置代码模板' })
        return
      }

      const tmpls = arr.map(t => {
        return t.code
      })

      this.$http.post('/zg-generator/code/generate', {
        schema: this.schema,
        tableName: this.table,
        packageName: this.packageName,
        vueLocation: this.vueLocation,
        tmpls: tmpls
      }, () => {
        this.$info({ title: '操作成功！请到相关位置查看生成的代码' })
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
